
<template>
  <div class="">
    <!--  -->
    <div class="phRq"
    v-for="bookInfo of page.records" :key="bookInfo.id"
    >
      <el-card class="bookImg" :body-style="{ padding: '0px' }">
        <el-image
          class="bi"
          :src="bookInfo.bookImgUrl"
          fit="fit"
        ></el-image>
      </el-card>
      <div class="bookInfo">
        <h1 class="bookTitle">{{ bookInfo.bookName }}</h1>
        <p class="otherInfo">
          <span >{{bookInfo.writerName}}</span> | <span>{{bookInfo.parentCatalog}}</span>·<span>{{bookInfo.catalogName}}</span> |
          <span>{{bookInfo.continuedState=='SERIALIZE' ? '连载中' : '已完结'}}</span>
        </p>
        <p class="info">
          {{bookInfo.synopsis}}</p>
        <p>
          <i class="chapterInfo">最新更新 {{bookInfo.lastChapterName}}</i> ·
          <i class="bookUpdate">{{bookInfo.updateTime}}</i>
        </p>
      </div>
      <div class="bookButton">
        <span class="a">{{bookInfo.orderField}}</span>
        <el-button class="b" type="info">书籍详情</el-button>
        <el-button class="c" >加入书架</el-button>
      </div>
    </div>
    <el-pagination
      style="margin-top: 30px"
      :current-page.sync="page.current"
      @current-change="currentPage"
      :total="page.total"
      :page-size="page.size"
      :pager-count="7"
      background
      layout="prev, pager, next,jumper"
      hide-on-single-page
    >
    </el-pagination>
    <!-- hide-on-single-page -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { rankingPaging } from "@/api";
export default {
  //import引入的组件需要注入到对象中才能使用

  components: {},
  data() {
    //这里存放数据
    return {
      page: {
        records: [],
        //数据总计
        total: 100,
        //每页显示多少行
        size: 10,
        //当前页
        current: 10,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    "$route.query": {
      deep: true,
      immediate: true, //初始化时让handler调用一下
      handler(val, oldval) {
        console.log("oldval改变了", val, oldval);
        this.currentPageNum = 1;
        this.pageSize = 10;
        rankingPaging(val.catalog, val.type, this.currentPageNum, this.pageSize)
          .then(({ data }) => {
            console.log(data);
            this.page = data.data;
          })
          .catch((err) => {});
      },
    },
  },
  //方法集合
  methods: {
    currentPage(num) {
      console.log("当前页", num);
      rankingPaging(
        this.$route.query.catalog,
        this.$route.query.type,
        this.currentPageNum,
        this.pageSize
      )
        .then(({ data }) => {
          console.log(data);
          this.page = data.data;
        })
        .catch((err) => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.phRq {
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
  min-width: 800px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.bookImg {
  min-width: 100px;
  margin-right: 16px;
  margin-left: 20px;
}
.bi {
  width: 102px;
  height: 136px;
}

.bookInfo {
  max-width: 60%;
  min-width: 550px;
}
.bookTitle {
  font: 18px/24px PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light,
    Microsoft YaHei, "sans-serif";
  height: 24px;
  margin-bottom: 8px;
  overflow: hidden;
}
.otherInfo {
  color: #a6a6a6;
  font-family: PingFangSC-Regular, -apple-system, Simsun;
  font-size: 12px;
  word-wrap: break-word;
  word-break: break-all;
  margin-bottom: 10px;
}
.otherInfo > span:nth-child(n):hover {
  color: red;
}
.bookInfo > .info {
  color: #666;
  font-size: 14px;
  height: 48px;
  line-height: 24px;
  margin-bottom: 8px;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
}
.bookInfo .chapterInfo {
  color: #3f5a93;
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 22px;
}
.bookUpdate {
  color: #b5b5b5;
  display: inline-block;
  vertical-align: middle;
  line-height: 22px;
  white-space: nowrap;
}
.bookButton {
  position: relative;
  min-width: 250px;
}
.a {
  position: absolute;
  top: 0px;
  right: 20px;
}
.b {
  position: absolute;
  left: 20px;
  bottom: 10px;
  background: #bf2c24;
  color: #ffffff;
}
.c {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
</style>